<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, inject, onMounted } from "vue";
import { CesiumRef, CESIUM_REF_KEY } from "@/libs/cesium";
// import * as Cesium from "cesium";
export default defineComponent({
  name: "cesiumMap",
  props: {
    cesiumToken: {
      type: String,
      default:
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzMzUxYjczMi1lYzhhLTQzMDQtOTIzOC02ZjlhM2FhYmI2MTIiLCJpZCI6ODM3NTUsImlhdCI6MTY0NTc3MjUzMH0.spfVO5Y_wP6SFfr5ha6rWlbK6aWVDsGc9NsRVmJ53d0",
    },
  },
  setup(props, context) {
    console.log(context);
    const init = (): void => {
      const { cesiumToken } = props;
      const { Cesium } = window;
      // console.log(this.$cesium, window, window);
      Cesium && (Cesium.Ion.defaultAccessToken = cesiumToken);
      const viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, // 动画小组件
        baseLayerPicker: true, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
        fullscreenButton: false, // 全屏组件
        vrButton: false, // VR模式
        geocoder: false, // 地理编码（搜索）组件
        homeButton: false, // 首页，点击之后将视图跳转到默认视角
        infoBox: false, // 信息框
        sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
        selectionIndicator: false, //是否显示选取指示器组件
        timeline: false, // 时间轴
        navigationHelpButton: false, // 帮助提示，如何操作数字地球。
        // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
        navigationInstructionsInitiallyVisible: false,
      });
      // 隐藏logo
      viewer._cesiumWidget._creditContainer.style.display = "none";

      // const imageryLayers = viewer.scene.imageryLayers;
      // const arcgisProvider = new window.Cesium.ArcGisMapServerImageryProvider({
      //   url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
      // });
      // imageryLayers.addImageryProvider(arcgisProvider);

      // var bingStyle = [
      //   Cesium.BingMapsStyle.AERIAL_WITH_LABELS,
      //   Cesium.BingMapsStyle.COLLINS_BART,
      //   Cesium.BingMapsStyle.CANVAS_GRAY,
      //   Cesium.BingMapsStyle.CANVAS_LIGHT,
      //   Cesium.BingMapsStyle.CANVAS_DARK,
      //   Cesium.BingMapsStyle.ORDNANCE_SURVEY,
      //   Cesium.BingMapsStyle.ROAD,
      //   Cesium.BingMapsStyle.AERIAL,
      // ];
      // const bingMapProvider = new Cesium.BingMapsImageryProvider({
      //   url: "https://dev.virtualearth.net", //’'https://dev.virtualearth.net',
      //   key: "AmXdbd8UeUJtaRSn7yVwyXgQlBBUqliLbHpgn2c76DfuHwAXfRrgS5qwfHU6Rhm8",
      //   mapStyle: bingStyle[0],
      // });
      // imageryLayers.addImageryProvider(bingMapProvider);

      // const ellipsoidProvider = new Cesium.EllipsoidTerrainProvider();
      // viewer.terrainProvider = ellipsoidProvider;

      const terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
        url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
        // token: cesiumToken,
      });
      viewer.terrainProvider = terrainProvider;

      // const terrainProvider = new Cesium.CesiumTerrainProvider({
      //   url: Cesium.IonResource.fromAssetId(3956),
      //   requestWaterMask: true, // 请求水体效果所需要的海岸线数据
      //   requestVertexNormals: true, // 请求地形照明数据
      // });
      // viewer.terrainProvider = terrainProvider;

      const cesiumRef = inject<CesiumRef>(CESIUM_REF_KEY);
      cesiumRef && (cesiumRef.viewer = viewer);
      console.log(props, cesiumRef);
    };

    onMounted(() => {
      init();
    });

    return {
      init,
    };
  },
});
</script>
<style scoped lang="scss">
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
}
</style>
